<template>
	<view>
		<view class="sticky-box Column width100">
			<!-- #ifdef APP-PLUS -->
			<view class="status_bar" />
			<!--  #endif -->
			<view class="Row  headtitlebg" style="background: #FFFFFF;width: 100% ;padding-top: 20upx;padding-bottom: 20upx;">
				<view style="margin-left: 30upx;"><image src="../../static/homepage/user.png" style="height: 50upx;width: 50upx;" @click="showLefts()"></image></view>
				<view class=" Flex2" style="height: 50upx;flex: 7; border-radius: 30upx ; text-align: center;">
					<text style="font-size: 28upx; color: #8B8B8B;" @click="toSearch()">商品名称</text>
					
					</view>

				<view style="margin-right: 30upx;">
					<text @click="OnChoseCar()">{{ district }}</text>
				</view>
			</view>

			<!--抽屉布局-->
			<uni-drawer :visible="showLeft" mode="left" @close="closeDrawer('left')">
				<view class="status_bar" />
				<view style="height: 80upx;width: 100%; text-align: right;padding: 10upx;">
					<image src="../../static/homepage/setting.png" style="height: 40upx;width: 40upx;margin-right: 50upx;" @click="setting()"></image>
				</view>

				<view style="width: 100%;display: flex; flex-direction:column; margin:0 auto;align-items: center;" @click="toUser()">
					<image style="width: 150upx;height: 150upx; border-radius: 100%;" src="../../static/homepage/head_ico.png"></image>

					<view
						style="width: 200upx; display: flex; flex-direction: row;border: solid #52C41A; border-radius: 30upx;border-width: 1upx;  align-items: center;margin-top: 10upx;"
					>
						<image src="../../static/homepage/huiyuan.png" style="height: 40upx;width: 40upx;margin-left: 20upx;"></image>
						<text style="font-size: 25upx;color: #52C41A;margin-left: 10upx ">一级会员</text>
					</view>
					<text style="font-size: 30upx;font-weight: bold; margin-top: 50upx;">159.15</text>
					<text style="font-size: 25upx;font-weight: bold; color: #808080;">余额</text>
				</view>

				<scroll-view scroll-y>
					<view
						style="width: 45%; float: left;display: flex;flex-direction: column;align-items: center;margin-top: 20upx;"
						v-for="(item, index) in drawerItemData"
						:key="item"
						@click="drawerItemClick(item.id)"
					>
						<image style="width: 50upx;height:50upx ;" :src="item.ico"></image>
						<text style="font-size: 22upx;margin-top: 2upx;">{{ item.title }}</text>
					</view>
				</scroll-view>

				<view style="width: 100%;height: 100%;position: fixed; flex-direction: column;align-items: flex-end;text-align: right;">
					<image src="../../static/homepage/back.png" style="width: 50upx; height: 50upx; margin-right: 50upx;margin-top: 100upx;" @click="hide()"></image>
				</view>
			</uni-drawer>

			<!--商品类型与列表布局-->
			<view class="page-body" style="height: 100%;">
				<scroll-view class="nav-left" scroll-y>
					<view class="nav-left-item" v-for="(item, index) in leftData" :key="item" @click="leftItemClick(item.id)">
						<image :src="item.ico" style="width: 40upx;height: 40upx;"></image>
						<view
							style="font-size: 32upx; margin-left: 10upx;color: #101010;" >
							{{ item.title }}
						</view>
					</view>
				</scroll-view>
				<scroll-view class="nav-right" scroll-y>
					<view class="product" v-for="(item, index) in rightData" :key="item" @click="rightItemClick(item.id)">
						<image class="product-image" mode="scaleToFill" :src="item.ico"></image>
						<text class="product-name">{{ item.title }}</text>
						<view class="product-info">
							<text class="product-info-price">{{ item.newPrice }}</text>
							<text class="product-info-slogan">{{ item.oldPrice }}</text>
							<view class="Flex1"></view>
							<text class="product-info-buy">{{ item.butTitle }}</text>
						</view>
					</view>
				</scroll-view>
				<view style="width:100%;: 200upx; background: #000000;"></view>
				<!-- 浮动按钮 -->
				<view class="btn-plusempty" hover-class="bottom-btn-hover" @click="rightBuy()"><image src="../../static/homepage/gouwuche.png" class="plusempty-img"></image></view>
				<view class="btn-plusempty1" hover-class="bottom-btn-hover" @click="leftMessage()">
					<image src="../../static/homepage/message.png" class="plusempty-img"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
var _self;
import uniDrawer from '../../components/uni-drawer/uni-drawer.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import leftData from '../../common/datajs/leftData.js';
import rightData from '../../common/datajs/rightData.js';
import drawerItemData from '../../common/datajs/home_drawer_item.js';
export default {
	components: {
		uniIcons,
		uniDrawer
	},

	data() {
		return {
			searchVal: '',
			height: 0,
			leftData: leftData,
			rightData: rightData,
			drawerItemData: drawerItemData,
			showLeft: false,
			district: '贵阳'
		};
	},
	onLoad: function(e) {
		_self = this;

		// this.height = uni.getSystemInfoSync().windowHeight - this.tabBarHeight - 1000; 
		// // _self.$message.showLoading('加载保养店铺中...');
		// _self.$message.hideLoading();
		// _self.$message.showToast("111",3000);
		var isWhile = true;
		// while(isWhile){
		// 	try{
		// 		uni.getLocation({
		// 			type: 'wgs84',
		// 			success: function(res) {
		// 				console.log(res);
		// 				_self.district = res.address.district;
		// 				isWhile = false;
		// 			}
		// 		});
		// 	}catch(e){
		// 		//TODO handle the exception
		// 		console.log(e)
		// 	}
			
		// }
		
	},
	methods: {
		OnChoseCar() {
			console.log('onclick');
		},
		leftItemClick(e) {
			console.log(e);
		},
		rightItemClick(e) {
			console.log(e);
			uni.navigateTo({
				url: '../goods/goods'
			});
		},
		showLefts() {
			this.showLeft = true;
		},
		hide() {
			this.showLeft = false;
		},
		closeDrawer(e) {
			this.showLeft = false;
		},
		leftMessage() {
			uni.navigateTo({
				url: '../test/test'
			});
			// this.$message.showToast('点击了消息按钮');
		},
		rightBuy() {
			uni.navigateTo({
				url: '../cart/cart'
			});
		},
		setting() {
			uni.navigateTo({
				url: '../drawer/setting/setting'
			});
		},
		toUser() {
			uni.navigateTo({
				url: '../login/code_login'
			});
		},
		toSearch() {
			uni.navigateTo({
				url: 'search',
				
			});
		},
		drawerItemClick(e) {
			switch (e) {
				case 1:
					uni.navigateTo({
						url: '../drawer/personal_information'
					});
					break;
				case 2:
					// uni.navigateTo({
					// 	url: '../drawer/order'
					// });
					uni.setStorageSync('tbIndex',-1);
					
					uni.navigateTo({url:'../drawer/order_list/order_list?tbIndex='+(0-1)}) 
					break;
				case 3:
					uni.navigateTo({
						url: '../drawer/address/address'
					});
					break;
				case 4:
					uni.navigateTo({
						url: '../drawer/invite_friends'
					});
					break;
				case 5:
					uni.navigateTo({
						url: '../drawer/problem_feedback'
					});
					break;
				case 6:
					uni.navigateTo({
						url: '../drawer/distribution'
					});
					break;
				case 7:
					uni.navigateTo({
						url: '../drawer/shop_management'
					});
					break;
				case 8:
					uni.navigateTo({
						url: '../drawer/privilege'
					});
					break;
				case 9:
					uni.navigateTo({
						url: '../drawer/part_time'
					});
					break;
			}
		}
	}
};
</script>

<style>
.Flex2 {
	height: 40upx;
	background-color: #f6f6f6;
	padding: 5upx;
	border-radius: 30upx;
	margin-left: 30upx;
	margin-right: 30upx;
	text-align: center;
}
.headbg {
	width: 750upx;
	position: fixed;
	left: 0upx;
	top: 0upx;
	background-color: #ffffff;
	z-index: 10;
}
.headtitlebg {
	align-items: center;
	font-size: 32upx;
	align-items: center;
}
.opbg {
	height: 80upx;
	align-items: center;
}
.Active {
	background-color: #29afff;
	color: #ffffff;
	height: 60upx;
	width: 200upx;
	font-size: 28upx;
	border-radius: 50upx;
}

.NotAcive {
	background-color: #fdfdfd;
	color: #535353;
	height: 60upx;
	width: 200upx;
	font-size: 28upx;
	border-radius: 50upx;
	border: #535353 2upx solid;
}
.oilsizebg {
	align-items: center;
	height: 60upx;
	background-color: #ff6600;
	color: #ffffff;
	font-size: 28upx;
}

.page-body {
	display: flex;
	background: #f6f6f6; 
	overflow: hidden;
}

.nav {
	display: flex;
	width: 100%;
}

.nav-left {
	width: 30%;
	background-color: #ffffff;
	height: 100%;
	position: fixed;
	show-scrollbar: false;
}

.nav-left-item {
	height: 100upx;
	/* border-right: solid 1px #f1f1f1; */
	border-bottom: solid 1px #f1f1f1;
	font-size: 30upx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nav-left-item:last-child {
	border-bottom: none;
}
.nav-right {
	width: 70%;
	height: 90%;
	background-color: #f0f0f0;
	position: fixed;
	margin-left: 30%;
	float: right;
	text-align: center;
	show-scrollbar: false;
	padding-bottom: 100upx;
	margin-bottom: 100upx;
}
.box {
	display: block;
	overflow: hidden;
	border-bottom: 20upx solid #f3f3f3;
	/* min-height: 100vh; */
	/*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
}
.box:last-child {
	border: none;
	min-height: 100vh;
}
.nav-right-item {
	width: 28%;
	height: 220upx;
	float: left;
	text-align: center;
	padding: 11upx;
	font-size: 28upx;
	background: #fff;
}

.nav-right-item image {
	width: 150upx;
	height: 150upx;
}

.active {
	color: #ff80ab;
	background: #fff;
	border-right: 0;
}
::-webkit-scrollbar {
	/*取消小程序的默认导航条样式*/
	width: 0;
	height: 0;
	color: transparent;
}

/*右边item样式*/
.product {
	width: 44%;
	border-radius: 5px;
	background-color: #fff;
	padding: 5upx;
	margin-top: 10upx;
	float: left;
	text-align: left;
	margin-left: 3%;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.product-image {
	width: 100%;
	height: 220upx;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.product-name {
	width: 100%;
	text-align: left;
	max-height: 2;
	font-size: 22upx;
	font-weight: bold;
}
.product-info {
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
	width: 100%;
	display: flex;
	flex-direction: row;
}
.product-info-price {
	color: #e65339;
	font-weight: bold;
	font-size: 24upx;
}
.product-info-slogan {
	color: #807c87;
	font-weight: bold;
	text-decoration: line-through;
	font-size: 22upx;
	margin-left: 5upx;
}

.product-info-buy {
	text-align: right;
	padding-left: 10upx;
	padding-right: 10upx;
	border-radius: 5px;
	border: solid #f00;
	color: #ff3433;
	border-width: 1upx;
	font-size: 22upx;
}

/*底部两个按钮样式 */
.btn-plusempty {
	width: 90upx;
	height: 90upx;
	position: fixed;
	bottom: 50upx;
	right: 20upx;
	overflow: hidden;
	align-items: center;
	text-align: center;
}

.btn-plusempty1 {
	width: 90upx;
	height: 90upx;
	position: fixed;
	bottom: 50upx;
	left: 20upx;
	overflow: hidden;
	align-items: center;
	text-align: center;
}

.plusempty-img {
	width: 60upx;
	height: 60upx;
}
</style>
